<template>
  <div class="login-container flex-jac">
    <h3 class="login-container__title">慕课论坛</h3>
    <div class="card flex-jac">
      <div class="items">
        <div class="wrap">
          <div class="item">
            <h4 class="item__title">注册登录</h4>
            <img class="code" src="../../assets/imgs/th.jpg" />
            <div class="info">
              <img src="../../assets/vue.svg" />
              <span>微信扫码登录</span>
            </div>
          </div>
          <div class="item">
            <h4>免密码登录</h4>
            <div class="info">
              <span>免密码登录</span>
            </div>
          </div>
          <div class="item">
            <h4>密码登录</h4>
            <div class="info">
              <span>密码登录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="options">
        <label class="weixin">
          <input type="radio" name="login" checked />
          <span>微信登录</span>
        </label>
        <label class="free-password">
          <input type="radio" name="login" />
          <span>免密码登录</span>
        </label>
        <label class="password">
          <input type="radio" name="login" />
          <span>密码登录</span>
        </label>
      </div>
      <div class="icons">
        <img src="../../assets/vue.svg" v-for="_ in 7" />
      </div>
      <div class="agreement">
        继续即代表同意《<span>服务协议</span>》和《<span>隐私政策</span>》
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;

  &__title {
    font-family: "Arial Bold";
    font-size: 36px;
    color: #26A778;
    font-weight: normal;
  }

  .card {
    flex-direction: column;
    background-color: #fff;
    padding: 30px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 28px;
    font-family: "苹方";

    .items {
      width: 350px;
      overflow: hidden;
      height: 300px;

      &:has(+.options>label.weixin>input[type="radio"]:checked)>.wrap {
        transform: translateX(0);
      }

      &:has(+.options>label.free-password>input[type="radio"]:checked)>.wrap {
        transform: translateX(-100%);
      }

      &:has(+.options>label.password>input[type="radio"]:checked)>.wrap {
        transform: translateX(-200%);
      }

      .wrap {
        display: flex;
        height: 100%;
        width: 100%;
        transition: .4s linear transform;



      }

      .item {
        position: relative;
        flex-shrink: 0;
        width: 100%;

        &:nth-of-type(1) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 10px;

          .code {
            width: 50%;
            aspect-ratio: 1/1;

          }

          .info {
            margin: 10px 0;

            img {
              width: 30px;
              height: 30px;
            }

            span {
              font-size: 20px;
              margin-left: 10px;
            }
          }
        }
      }


    }

    .options {
      display: flex;

      input[type="radio"] {
        appearance: none;
        width: 0;
        height: 0;
      }

      label {
        font-family: "苹方";
        font-size: 20px;
        padding: 0 10px;
        color: #26A778;

        &.label--checked {
          color: #000;
        }

        &:not(:last-of-type) {

          border-right: 1px solid #000;
        }
      }
    }

    .icons {
      display: flex;
      gap: 4px;

      img {
        object-fit: cover;
        width: 20px;
        height: 20px;
        margin: 20px 0;
      }
    }

    .agreement {
      font-size: 20px;

      >span {
        color: #26A778;
      }
    }
  }
}
</style>